/*
 * @Description: 媒体信息基础组件
 * @Author: Rfan
 * @Date: 2022-09-23 21:32:47
 * @LastEditTime: 2022-09-24 10:26:46
 */

import { useEffect, useState } from 'react';
import { Form } from 'antd';
import classNames from 'classnames/bind';
import type { IMediaBaseInfo } from '@/components/Preview/components/MediaInfo/index';
import styles from '../../styles/mediaInfo.module.scss';

const cx = classNames.bind(styles);
export interface IMediaBaseInfoProps {
  data: IMediaBaseInfo;
}

const MediaBaseInfo = (props: IMediaBaseInfoProps) => {
  const { data } = props;

  // Object.entries方法转换后的信息数组
  const [mediaInfoArr, setMediaInfoArr] = useState<[string, string][]>(null);

  useEffect(() => {
    if (data) {
      setMediaInfoArr(Object.entries<string>(data));
    }
  }, [data]);

  return (
    <>
      <Form
        className={cx('media-base')}
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        size="small"
        labelWrap
      >
        {mediaInfoArr &&
          mediaInfoArr.map(([key, val]) => (
            <Form.Item label={key} key={key}>
              {val}
            </Form.Item>
          ))}
      </Form>
    </>
  );
};

export default MediaBaseInfo;
